<script setup>
import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue'

const showFullText = ref(false)
const toggleText = () => {
  showFullText.value = !showFullText.value
}
const storedPlaylist = JSON.parse(localStorage.getItem('playlist'))

// 检查数据是否存在，若不存在，初始化为空数组或其他默认值
const playlist = storedPlaylist || []

const currentIndex = ref(0) // 当前显示的视频索引
const startY = ref(0) // 触摸开始位置
const endY = ref(0) // 触摸结束位置
const videosRef = useTemplateRef('videos')
console.log(videosRef);


// 自动播放当前视频
const playCurrentVideo = () => {
  console.log('playCurrentVideo', videosRef)

  videosRef.value.forEach((video, index) => {
    if (index === currentIndex.value) {
      video.play()
      // console.log('====', 'play')
    } else {
      video.pause()
    }
  })
}
const toggleVideo = (e) => {
  // 检查当前视频是否暂停，如果是则播放，否则暂停
  console.log('toggleVideo', e, e.target, e.target.paused)
  if (e.target.paused) {
    console.log('play')
    e.target.play()
  } else {
    console.log('pause')
    e.target.pause()
  }
}

// 触摸开始
const onTouchStart = (event) => {
  startY.value = event.touches[0].clientY
}

// 触摸滑动
const onTouchMove = (event) => {
  endY.value = event.touches[0].clientY
}

// 触摸结束，判断滑动方向
const onTouchEnd = () => {
  const deltaY = endY.value - startY.value

  if (deltaY > 50 && endY.value !== 0 && currentIndex.value > 0) {
    // 上滑
    currentIndex.value--
    // 播放当前视频
    playCurrentVideo()
  } else if (deltaY < -50 && endY.value !== 0 && currentIndex.value < playlist.length - 1) {
    // 下滑
    currentIndex.value++
    // 播放当前视频
    playCurrentVideo()
  }
  // 重置滑动位置
  startY.value = 0
  endY.value = 0
}


</script>
  
<template>
  <div
    class="video-container"
    @touchstart="onTouchStart"
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
  >
    <div class="back-button">
      <van-icon name="arrow-left" @click="$router.back()" size="30rem" color="#999" />
    </div>
    <div
      v-for="(item, index) in playlist"
      :key="item.id"
      :style="{ transform: `translateY(${(index - currentIndex) * 100}%)` }"
      class="video-wrapper"
    >
      <video
        :src="item.video.url"
        class="video-player"
        loop
        :poster="item.video.imgUrl"
        preload="none"
        ref="videos"
        @click="toggleVideo($event)"
      ></video>
      <div class="line">
        <van-image round :src="item.user.avatarurl" size="48rem" fit="cover">
          <template v-slot:error>加载失败</template>
        </van-image>
        <div style="margin-top: 20rem">
          <div class="icon"><van-icon size="32rem" name="good-job-o" /></div>
          <div class="info">{{ item.upCount }}</div>
        </div>
        <div>
          <div class="icon">
            <van-icon size="32rem" name="chat-o" />
          </div>
          <div class="info">评论</div>
        </div>
        <div>
          <div class="icon">
            <van-icon size="32rem" name="share-o" />
          </div>
          <div class="info">分享</div>
        </div>
      </div>
      <div class="dsc">
        <div class="name">{{ item.user.nickName }}</div>
        <p :class="{ 'text-clamp': !showFullText }" @click.stop="toggleText">
          {{ item.title }}
        </p>
      </div>
    </div>
  </div>
</template>
  

  <style scoped lang="less">
.back-button {
  position: fixed; // 固定定位
  top: 20px; // 距离底部20px
  left: 20px; // 距离左边20px
  z-index: 1000; // 确保按钮在最上层
}
.video-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  touch-action: none; /* 禁用默认滚动行为 */
}

.video-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.line {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: white;
  position: absolute;
  bottom: 60rem;
  right: 10rem;
  > div {
    width: 48rem;
    height: 48rem;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40rem;
    .icon {
      padding: 8rem;
      background-color: rgba(0, 0, 0, 0.43);
      border-radius: 50%;
    }
  }
}
.dsc {
  position: absolute;
  bottom: 20rem;
  left: 30rem;
  color: white;
  width: 280rem;
  .text-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制文本为两行 */
    overflow: hidden;
  }

  p {
    cursor: pointer; /* 显示可点击的指针样式 */
  }
}
</style>
  